<template>

  <div class="app-container">

    <!-- <el-steps :active="active" finish-status="success" align-center >
      <el-step title="选择数据库表"></el-step>
      <el-step title="设置字段属性"></el-step>
      <el-step title="设置代码属性"></el-step>
    </el-steps>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->

    <!-- <el-divider  >12313</el-divider> -->

    <!-- 表格-条件筛区域  -->
    <div class="filter-container">
      <el-select v-model="tableName" placeholder="请选择数据库表" class="filter-item" filterable @change="chooseTableName($event)">
        <el-option
          v-for="item in tableList"
          :key="item.tablename"
          :label="item.tablename"
          :value="item.tablename"
        />
      </el-select>
      <el-input v-model="mouduleCode" placeholder="请输入模型描述" style="width: 200px;" class="filter-item" />
      <el-button class="filter-item" type="primary" icon="el-icon-view" @click="dopreview()">预览</el-button>
      <!-- <el-button   class="filter-item" type="primary" icon="el-icon-search" @click="dobuild()">生成</el-button> -->
    </div>

    <!-- 表格-内容区域 -->
    <el-table :key="tableKey" v-loading="listLoading" :data="columnList" border fit highlight-current-row style="width: 100%;">

      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :align="column.align?column.align:'center'"
        :min-width="column.minWidth"
        :sortable="column.sortable"
        :fixed="column.fixed"
        :type="column.type"
        :formatter="column.formatter"
      >
        <template slot-scope="scope">
          <!-- 行内显示图片 -->
          <img v-if="column.imgFlag==true" :src="CMBASE.baseFileContext + scope.row[column.prop]" width="60" height="60" class="img">
          <!-- 行内格式自定义 -->
          <span v-else-if="column.formatter"> {{ column.formatter(scope.row) }}</span>
          <!-- 行内显示开关按钮 -->
          <el-switch v-else-if="column.switchFlag==true" v-model="scope.row[column.prop]" active-value="1" inactive-value="0" />
          <!-- 行内显示下拉列 -->
          <el-select v-else-if="column.selectFlag==true" v-model="scope.row[column.prop]">
            <el-option
              v-for="item in column.dataSource"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
          <!-- 行内显示文本内容（默认） -->
          <span v-else>{{ scope.row[column.prop] }}</span>
        </template>
      </el-table-column>

    </el-table>

    <!--新增编辑界面-->
    <el-dialog title="代码预览" width="85%" top="2vh" :visible.sync="dialogFormVisible" :close-on-click-modal="true">
      <div style="height:500px;overflow-y: scroll;">
        <el-tabs v-model="activeName">
          <el-tab-pane
            v-for="item in codeTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
            <!-- <div v-html="item.content"></div> -->
            <JsonEditor ref="jsonEditor" v-model="item.content"></JsonEditor>
<!--            <pre style="color: red;" contenteditable="true">{{ item.content }}</pre>-->
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="dialogFormVisible=false">取消</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import JsonEditor from '@/components/JsonEditor'
import { getTableList, getColumnList, doPreview } from '../../api/modules/tools'
export default {
  components: {
    JsonEditor
  },
  data() {
    return {
      tableKey: 0,
      active: 0,
      listLoading: true,
      tableList: [],
      tableName: '',
      mouduleCode: '',
      columnList: [],
      dialogFormVisible: false,
      activeName: 'vue.ftl',
      codeTabs: [],
      columns: [
        { prop: 'COLUMN_NAME', label: '列名', sortable: false },
        { prop: 'COLUMN_COMMENT', label: '注释', sortable: false },
        // {prop: 'DATA_TYPE',  label: '字段类型',  sortable:false  },
        { prop: 'COLUMN_TYPE', label: '列类型', sortable: false },

        { prop: 'LIST_SHOW_FLAG', label: '列表是否显示', sortable: false, switchFlag: true },
        { prop: 'LIST_SHOW_TYPE', label: '列表展示方式', sortable: false, selectFlag: true,
          dataSource: [
            { 'value': '0', 'text': '文本框' },
            { 'value': '1', 'text': '图片' },
            { 'value': '2', 'text': '标签' },
            { 'value': '3', 'text': '开关' }
          ]
        },
        { prop: 'FORM_SHOW_FLAG', label: '表单是否显示', sortable: false, switchFlag: true },
        { prop: 'FORM_SHOW_TYPE', label: '表单域类型', sortable: false, selectFlag: true,
          dataSource: [
            { 'value': '0', 'text': '文本框' },
            { 'value': '10', 'text': '计数器' },
            { 'value': '21', 'text': '按钮组' },
            { 'value': '5', 'text': '开关' },
            { 'value': '2', 'text': '下拉框' },
            { 'value': '3', 'text': '单图片' },
            { 'value': '31', 'text': '多图片' },
            { 'value': '1', 'text': '日期选择' },
            { 'value': '4', 'text': '文本域' },
            { 'value': '6', 'text': '多选' },
            { 'value': '7', 'text': '单选' },
            { 'value': '8', 'text': '文本编辑器' }
          ]
        },
        { prop: 'FORM_RULE_FLAG', label: '表单是否必填', sortable: false, switchFlag: true }

      ]
    }
  },
  created() {
    this.getTableList()
  },
  mounted() {

  },

  beforeDestroy() {

  },
  methods: {

    next() {
      if (this.active++ > 2) this.active = 0
    },
    // 获取数据库表列表数据
    getTableList() {
      // 【API请求】----获取数据库表列表数据
      getTableList().then(response => {
        // console.log(response)
        this.tableList = response
        this.listLoading = false
          // console.log(this.tableList)
      }).catch((res) => {
        this.$message({ message: '数据库表列表获取失败', type: 'error' })
      })
    },
    // 选中数据库表
    chooseTableName(tableName) {
      this.tableName = tableName
      this.getColumnList(tableName)
    },
    // 获取字段列表数据
    getColumnList(tableName) {
      this.columnList = []
      // 【API请求】----获取用户列表数据
      getColumnList({ tablename: tableName }).then(response => {
        // this.columnList = response.rows;
        response.content.forEach(element => {
          element.LIST_SHOW_FLAG = '1',
          element.LIST_SHOW_TYPE = '0',
          element.FORM_SHOW_FLAG = '1',
          element.FORM_SHOW_TYPE = '0',
          element.FORM_RULE_FLAG = '1',
          this.columnList.push(element)
        })
          // console.log(this.columnList)
        this.listLoading = false
      }).catch((res) => {
        this.$message({ message: '数据库字段列表获取失败', type: 'error' })
      })
    },
    // 点击预览事件
    dopreview() {
      if (this.tableName == '') {
        this.$message({ message: '请先选择数据库表再进行操作', type: 'error' })
        return false
      }
      if (this.mouduleCode == '') {
        this.$message({ message: '请先输入模型编码', type: 'error' })
        return false
      }

        // console.log(this.columnList)
      const paramList = []
      this.columnList.forEach(element => {
        paramList.push({
          'COLUMN_NAME': element.COLUMN_NAME,
          'COLUMN_COMMENT': element.COLUMN_COMMENT,
          'LIST_SHOW_FLAG': element.LIST_SHOW_FLAG,
          'LIST_SHOW_TYPE': element.LIST_SHOW_TYPE,
          'FORM_SHOW_FLAG': element.FORM_SHOW_FLAG,
          'FORM_SHOW_TYPE': element.FORM_SHOW_TYPE,
          'FORM_RULE_FLAG': element.FORM_RULE_FLAG,
          'ELEMENT_DATASOURCE': ''
        })
      })
      const param = {
        data: JSON.stringify(paramList),
        tablename: this.tableName,
        describe: this.mouduleCode
      }
        // console.log(param)
        // 【API请求】--- 代码生成预览
      doPreview(param).then(response => {
          // console.log(response.result)
          let data = response.result
          this.dialogFormVisible = true
          this.codeTabs = []
          for (var key in data) {
              const tttContent = data[key]
              // tttContent.replace(/</g, "&lt;");
              // tttContent.replace(/>/g, "&gt;");
              this.codeTabs.push({name: key, title: key, content: tttContent})
          }
      }).catch((res) => {
        this.$message({ message: '代码预览请求失败，请稍后再试', type: 'error' })
      })
    },
    // 点击生成事件
    dobuild() {
      console.log("生成不了啊，用预览不香吗？")
    }
  }
}
</script>
<style scoped>
  .chart-container{
    position: relative;
    width: 100%;
    height: calc(100vh - 84px);
  }
</style>
